<!--
 * @Author: cest
 * @Date: 2022-08-03 10:22:35
 * @LastEditTime: 2022-08-05 16:30:22
 * @LastEditors: cest
 * @FilePath: /vue3-todo-list/src/components/List/index.vue
 * @Description: List
-->
<template lang="pug">
.List
  el-checkbox-group(
    :model-value="doneTodoList"
    @change="handleChange")
    Item(
      v-for="(todo,index) in todoList"
      :key="todo.id"
      :todo="todo"
      :index="index" )

</template>
<script>
import { ref } from 'vue'

import { useStore } from 'vuex'
import { useState } from '@/hooks/useState'
import { mapHelper } from '@/hooks/useMapper'
import { MAP } from '@/store/modules/todo'
import Item from '../Item/index.vue'

export default {
  name: 'List',
  props: {
    todoList: {
      type: Array,
      default: () => []
    },
    checkAll: {
      type: Boolean,
      default: false
    },
    isIndeterminate: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const store = useStore()

    const todoStoreState = useState(MAP.NAMESPACED, {
      todoList: [MAP.TODO_LIST],
      doneTodoList: state => {
        console.log('state2:', state)
        return state[MAP.DONE_TODO_LIST]
      }
    })

    const handleChange = (value) => {
      console.log('handleChange value', value)
      store.commit(mapHelper(MAP.NAMESPACED, MAP.UPDATE), { doneTodoList: value });
    }

    return {
      handleChange,
      ...todoStoreState
    };
  },
  components: { Item }
}
</script>
<style lang="stylus" scoped>
@import './stylus'
</style>
